<script setup>
	import {
		ref,
		nextTick,
		computed,
		onMounted,
		onUnmounted
	} from 'vue'
	import CommonButton from '@/components/CommonButton.vue'
	import { houseTypeApi } from '@/api/houseType'
// 移除错误的导入
// import { log } from 'three/tsl'

	// 小区信息参数
	const houseInfo = ref({
		size: '请选择',
	})
	const houseValue = ref({
		id:null,
		roomType: '', // 户型类型：几室几厅
		roomCount: '', // 房间数
		area: null, // 面积，使用数字类型
		housePic: '' // 户型图地址
	})
	const styleValue = ref({
		id: null,
		name: '',
		image: '',
		is3D: null
	})

	// 是否显示3D标签
	const is3DEnabled = ref(true)

	// 是否显示户型选择弹窗
	const showHouseTypePopup = ref(false)
	// 是否显示风格选择弹窗
	const showStylePopup = ref(false)
	// 控制动画类名
	const houseTypePopupAnimated = ref(false)
	const stylePopupAnimated = ref(false)
	// 控制关闭动画
	const houseTypeIsClosing = ref(false)
	const styleIsClosing = ref(false)

	

	// 弹窗位置样式
	const houseTypePopupStyle = computed(() => {
		if (!showHouseTypePopup.value) return {}

		return {
			transform: houseTypePopupAnimated.value ? 'scaleY(1) translateY(0)' : 'scaleY(0.7) translateY(30%)',
			opacity: houseTypePopupAnimated.value ? 1 : 0
		}
	})

	// 风格弹窗位置样式
	const stylePopupStyle = computed(() => {
		if (!showStylePopup.value) return {}

		return {
			transform: stylePopupAnimated.value ? 'scaleY(1) translateY(0)' : 'scaleY(0.7) translateY(30%)',
			opacity: stylePopupAnimated.value ? 1 : 0
		}
	})

	// 是否正在定位
	const isLocating = ref(false)

	// 返回上一页
	const goBack = () => {
		uni.navigateBack()
	}

	// 户型选项卡数据
	const houseTypesTabs = ref(['全部', '一室', '二室', '三室', '四室及以上'])
	// 当前选中的户型选项卡索引
	const activeTabIndex = ref(0)

	// 户型列表数据
	const houseTypesList = ref([])
	// 是否正在加载数据
	const isLoading = ref(false)
	// 加载错误信息
	const loadError = ref('')

	// 风格选项卡数据
	const styleTypeTabs = ref(['平面效果'])
	// 当前选中的风格选项卡索引
	const activeStyleTabIndex = ref(0)

	// 风格列表数据
	const styleTypesList = ref([])
	// 风格信息
	const styleInfo = ref({
		name: '请选择'
	})

		// 获取户型列表数据
		const fetchHouseTypes = async () => {
		isLoading.value = true
		loadError.value = ''
		
		try {
			// 构建查询参数
			const params = {
				id: null,
				roomType: "",
				roomCount: "", 
				area: null,
				housePic: "" 
			}
			
			// 只有在非"全部"选项卡下才添加查询条件
			if (activeTabIndex.value > 0) {
				// 直接使用选项卡的文本值进行查询
				params.roomCount = houseTypesTabs.value[activeTabIndex.value]
			}
			
			// 确保id和area字段为数字类型或undefined，而不是字符串"null"
			const cleanParams = {}
			Object.keys(params).forEach(key => {
				if (params[key] !== null) {
					cleanParams[key] = params[key]
				}
			})
			
			console.log('查询参数:', cleanParams);
			const response = await houseTypeApi.getHouseTypes(cleanParams)
			console.log('户型数据响应:', response);
			if (response && response.data) {
				// 将接口返回的数据转换为前端需要的格式
				houseTypesList.value = response.data.rows.map(item => ({
					id: item.id,
					size: item.roomType, // 直接使用后端返回的roomType
					area: parseFloat(item.area || 0), // 转换为数字类型
					image: item.housePic || '/static/images/house-type-1.png' // 使用后端housePic字段
				}))
			} else {
				loadError.value = '获取户型数据失败'
				// 使用默认数据作为备选
				setDefaultHouseTypesList()
			}
		} catch (error) {
			console.error('获取户型列表失败', error)
			loadError.value = '网络错误，请稍后再试'
			// 使用默认数据作为备选
			setDefaultHouseTypesList()
		} finally {
			isLoading.value = false
		}
	}

	// 设置默认户型数据（当接口请求失败时使用）
	const setDefaultHouseTypesList = () => {
		houseTypesList.value = []
	}

	// 切换户型选项卡
	const switchTab = (index) => {
		activeTabIndex.value = index
		// 切换选项卡时重新获取数据
		fetchHouseTypes()
	}

	// 选择户型
	const selectHouseTypeItem = async (item) => {
		try {
			// 尝试获取户型详情
			const response = await houseTypeApi.getHouseTypeDetail(item.id)
			if (response && response.data) {
				const detail = response.data
				// 更新显示信息
				houseInfo.value = {
					size: `${detail.roomType} ${detail.area}m²`
				}
				// 存储完整的户型数据
				houseValue.value = {
					id: detail.id,
					roomType: detail.roomType,
					roomCount: detail.roomCount || '',
					area: parseFloat(detail.area || 0), // 转换为数字类型
					housePic: detail.housePic || item.image
				}
			} else {
				// 如果获取详情失败，使用列表中的数据
				houseInfo.value = {
					size: `${item.size} ${item.area}m²`
				}
				// 存储列表中的数据
				houseValue.value = {
					id: item.id,
					roomType: item.size,
					roomCount: '',
					area: parseFloat(item.area || 0), // 转换为数字类型
					housePic: item.image
				}
			}
		} catch (error) {
			console.error('获取户型详情失败', error)
			// 如果获取详情失败，使用列表中的数据
			houseInfo.value = {
				size: `${item.size} ${item.area}m²`
			}
			// 存储列表中的数据
			houseValue.value = {
				id: item.id,
				roomType: item.size,
				roomCount: '',
				area: parseFloat(item.area || 0), // 转换为数字类型
				housePic: item.image
			}
		}
		closeHouseTypePopup()
	}

		// 显示选户型弹窗
		const selectHouseType = () => {
		// 已经打开则不做操作
		if (showHouseTypePopup.value) return;
		
		// 如果风格弹窗打开，先关闭它
		if (showStylePopup.value) {
			// 立即开始关闭风格弹窗动画
			styleIsClosing.value = true;
			stylePopupAnimated.value = false;
			
			// 同时开始打开户型弹窗
			houseTypeIsClosing.value = false;
			showHouseTypePopup.value = true;
			
			// 户型弹窗添加动画
			nextTick(() => {
				// 直接设置动画类，不使用requestAnimationFrame
				houseTypePopupAnimated.value = true;
			});
			
			// 完成风格弹窗关闭
			setTimeout(() => {
				styleIsClosing.value = false;
				showStylePopup.value = false;
			}, 300);
			
			// 获取户型数据
			fetchHouseTypes();
		} else {
			// 直接打开户型弹窗
			openHouseTypePopup();
		}
	}

	// 打开户型弹窗的实际方法
	const openHouseTypePopup = () => {
		houseTypeIsClosing.value = false
		showHouseTypePopup.value = true
		// 等待DOM更新后添加动画类
		nextTick(() => {
			// 替换requestAnimationFrame，直接设置动画类
			houseTypePopupAnimated.value = true
		})
		// 打开弹窗时获取数据
		fetchHouseTypes()
	}

	// 组件加载时初始化数据
	onMounted(() => {
		// 初始加载默认数据，作为备选
		setDefaultHouseTypesList()
		
		// 页面加载时自动连接WebSocket
		connectWebSocket()
	})

	// 关闭选户型弹窗
	const closeHouseTypePopup = () => {
		// 设置关闭动画
		houseTypeIsClosing.value = true

		// 移除动画类
		houseTypePopupAnimated.value = false

		// 等待动画结束后隐藏弹窗
		setTimeout(() => {
			houseTypeIsClosing.value = false
			showHouseTypePopup.value = false
		}, 400)
	}

	// 显示城市选择器
	const openCitySelector = () => {
		showCitySelector.value = true
	}

	// 关闭城市选择器
	const closeCitySelector = () => {
		showCitySelector.value = false
	}

	// 选择城市
	const selectCity = (selectedCity) => {
		city.value = selectedCity
		showCitySelector.value = false
	}

	// 重新定位
	const refreshLocation = () => {
		isLocating.value = true
		// 模拟定位过程
		setTimeout(() => {
			isLocating.value = false
			uni.showToast({
				title: '定位成功',
				icon: 'success'
			})
		}, 1500)
	}

	// 设置默认风格数据
	const setDefaultStylesList = () => {
		styleTypesList.value = [
			{
				id: 1,
				name: '现代简约风',
				desc: '10秒生成平面设计方案，不限次数',
				image: '/static/images/style-1.png',
				is3D: false
			},
			{
				id: 2,
				name: '北欧风格',
				desc: '10秒生成平面设计方案，不限次数',
				image: 'http://sushyyr85.hb-bkt.clouddn.com/bo.jpeg',
				is3D: false
			},
			{
				id: 3,
				name: '中式风格',
				desc: '10秒生成平面设计方案，不限次数',
				image: '/static/images/style-3.png',
				is3D: false
			},
			{
				id: 4,
				name: '轻奢风格',
				desc: '10秒生成平面设计方案，不限次数',
				image: '/static/images/style-4.png',
				is3D: false
			}
		]
	}

	// 切换风格选项卡
	const switchStyleTab = (index) => {
		activeStyleTabIndex.value = index
		// 可以在这里添加切换风格数据的逻辑
	}

	// 选择风格
	const selectStyleItem = (item) => {
		// 更新显示信息
		styleInfo.value = {
			name: item.name,
			is3D: item.is3D
		}
		// 存储完整的风格数据
		styleValue.value = {
			id: item.id,
			name: item.name,
			image: item.image,
			is3D: item.is3D
		}
		closeStylePopup()
	}

		// 显示选风格弹窗
		const selectStyle = () => {
		// 已经打开则不做操作
		if (showStylePopup.value) return;
		
		// 如果户型弹窗打开，先关闭它
		if (showHouseTypePopup.value) {
			// 立即开始关闭户型弹窗动画
			houseTypeIsClosing.value = true;
			houseTypePopupAnimated.value = false;
			
			// 同时开始打开风格弹窗
			styleIsClosing.value = false;
			showStylePopup.value = true;
			
			// 风格弹窗添加动画
			nextTick(() => {
				// 直接设置动画类，不使用requestAnimationFrame
				stylePopupAnimated.value = true;
			});
			
			// 完成户型弹窗关闭
			setTimeout(() => {
				houseTypeIsClosing.value = false;
				showHouseTypePopup.value = false;
			}, 300);
			
			// 加载风格数据
			setDefaultStylesList();
		} else {
			// 直接打开风格弹窗
			openStylePopup();
		}
	}

	// 打开风格弹窗的实际方法
	const openStylePopup = () => {
		styleIsClosing.value = false
		showStylePopup.value = true
		// 等待DOM更新后添加动画类
		nextTick(() => {
			// 直接设置动画类，不使用requestAnimationFrame
			stylePopupAnimated.value = true
		})
		// 加载风格数据
		setDefaultStylesList()
	}

	// 关闭选风格弹窗
	const closeStylePopup = () => {
		// 设置关闭动画
		styleIsClosing.value = true

		// 移除动画类
		stylePopupAnimated.value = false

		// 等待动画结束后隐藏弹窗
		setTimeout(() => {
			styleIsClosing.value = false
			showStylePopup.value = false
		}, 400)
	}

	// 生成方案
	const generatePlan = () => {
		// 检查是否已选择户型和风格
		if (!houseValue.value.id) {
			uni.showToast({
				title: '请先选择户型',
				icon: 'none'
			})
			return
		}
		
		if (!styleValue.value.id) {
			uni.showToast({
				title: '请先选择风格',
				icon: 'none'
			})
			return
		}
		
		// 标记为正在加载状态
		isDialogueLoading.value = true
		
		// 添加用户请求消息
		dialogueMessages.value.push({
			type: 'REQUEST',
			content: `正在生成 ${houseInfo.value.size}/${styleInfo.value.name} 的设计方案...`,
			timestamp: Date.now(),
			source: 'user',
			status: 'sending'
		})
		
		// 发送设计数据
		sendDesignData()
		
		// 自动滚动到底部
		nextTick(() => {
			scrollToBottom()
		})
		
		// 假设后端处理完成后会返回设计图片数据
		// 这里为了演示，使用setTimeout模拟接收到后端返回的数据
		setTimeout(() => {
			// 模拟生成设计图片
			generatedDesigns.value = generateDesignImages(7)
			
			// 设置项目名称
			if (styleValue.value && styleValue.value.name) {
				projectName.value = `未知 ${houseInfo.value.size} ${styleInfo.value.name}`
			}
			
			// 标记为完成状态
			isDialogueLoading.value = false
			
			// 添加完成消息
			dialogueMessages.value.push({
				type: 'RESPONSE',
				content: '设计方案已生成完成！',
				timestamp: Date.now(),
				source: 'ai',
				status: 'completed'
			})
		}, 5000)
	}
	
		// 对话框相关数据
		const dialogueMessages = ref([])
	const isDialogueLoading = ref(false)
	let socketTask = null
	let isReconnecting = false
	
	// 设计预览相关
	const generatedDesigns = ref([])
	const currentImageIndex = ref(0)
	const roomTags = ref([])
	// 添加项目名称变量
	const projectName = ref('')
	
		// 连接WebSocket
		const connectWebSocket = () => {
		// 如果已经存在连接，先关闭
		if (socketTask) {
			try {
				socketTask.close()
			} catch (e) {
				console.error('关闭WebSocket连接失败:', e)
			}
			socketTask = null
		}
		
		// 创建WebSocket连接
		// 注意：实际生产环境中需要修改为真实的服务器地址
		const wsUrl = 'ws://127.0.0.1:9206/aidesign/dialogue' // 使用固定地址
		
		try {
			// 使用uni-app的WebSocket API
			uni.connectSocket({
				url: wsUrl,
				success: () => {
					console.log('WebSocket连接请求已发送')
				},
				fail: (error) => {
					console.error('创建WebSocket连接失败:', error)
					handleConnectionError()
				}
			})
			
			// 使用全局事件监听而不是socketTask对象
			uni.onSocketOpen(function(res) {
				console.log('WebSocket连接已建立', res)
				// 不再尝试获取socketTask对象
				socketTask = true // 只标记为已连接状态
				
				// 连接成功后不再显示加载状态
				isDialogueLoading.value = false
				
				// 添加连接成功的消息
				// dialogueMessages.value.push({
				// 	type: 'CONNECTED',
				// 	content: '',
				// 	timestamp: '',
				// 	source: 'system',
				// 	status: 'success'
				// })
			})
			
			// 其他事件监听保持不变...
			
			uni.onSocketMessage(function(res) {
				try {
					const message = JSON.parse(res.data)
					console.log('收到消息:', message)
					console.log("message:");
					console.log(message);
					console.log("1111111");
					// 将消息添加到对话框
					dialogueMessages.value.push(message)
					
					// 如果是最终结果，标记加载完成并显示设计图片
					if (message.type === 'RESPONSE' && message.status === 'completed') {
						isDialogueLoading.value = false
						
						// 检查消息中是否包含设计图片数据
						if (message.designImages && Array.isArray(message.designImages) && message.designImages.length > 0) {
							// 使用服务器返回的设计图片
							generatedDesigns.value = message.designImages.map(img => ({
								id: img.id,
								url: img.url,
								roomType: img.roomType || '未知'
							}))
						} 
						// 处理Map<String,String>格式的房间名和图片数据
						else if (message.roomPics && typeof message.roomPics === 'object') {
							// 将Map转换为前端所需的格式
							const designs = []
							const rooms = []
							
							// 遍历房间图片Map
							Object.entries(message.roomPics).forEach(([roomName, imageUrl], index) => {
								designs.push({
									id: index + 1,
									url: imageUrl,
									roomType: roomName
								})
								rooms.push(roomName)
							})
							
							// 更新生成的设计和房间标签
							generatedDesigns.value = designs
							if (rooms.length > 0) {
								roomTags.value = rooms
							}
						} else {
							// 没有图片数据时，使用模拟数据
							generatedDesigns.value = generateDesignImages(7)
						}
						
						// 设置项目名称
						if (houseValue.value && styleValue.value) {
							projectName.value = `未知 ${houseInfo.value.size} ${styleInfo.name.value}`
						}
					}
					
					// 自动滚动到底部
					nextTick(() => {
						scrollToBottom()
					})
				} catch (error) {
					console.error('解析消息失败:', error)
				}
			})
			
			uni.onSocketClose(function(res) {
				console.log('WebSocket连接已关闭', res)
				socketTask = null
				
				if (!isReconnecting) {
					// 添加连接断开的提示消息
					dialogueMessages.value.push({
						type: 'ERROR',
						content: '连接已断开，请重试',
						timestamp: Date.now(),
						source: 'system',
						status: 'error'
					})
				}
			})
			
			uni.onSocketError(function(res) {
				console.error('WebSocket错误:', res)
				socketTask = null
				handleConnectionError()
			})
			
		} catch (error) {
			console.error('创建WebSocket连接失败:', error)
			handleConnectionError()
		}
	}
	
		// 处理连接错误
		const handleConnectionError = () => {
		isDialogueLoading.value = false
		
		// 添加错误提示消息
		dialogueMessages.value.push({
			type: 'ERROR',
			content: '无法连接到服务器，请检查网络设置',
			timestamp: Date.now(),
			source: 'system',
			status: 'error'
		})
	}
	
			// 发送设计数据
	const sendDesignData = () => {
		if (!socketTask) {
			console.error('WebSocket未创建，正在重新连接...')
			isReconnecting = true
			connectWebSocket()
			
			// 延迟发送数据，等待连接建立
			setTimeout(() => {
				isReconnecting = false
				sendDesignData()
			}, 1000)
			return
		}
		
		// 组装数据
		const designData = {
			houseValue: houseValue.value,
			styleValue: styleValue.value
		}
		
		// 使用uni.sendSocketMessage发送数据
		uni.sendSocketMessage({
			data: JSON.stringify(designData),
			success: () => {
				console.log('设计数据已发送', designData)
			},
			fail: (err) => {
				console.error('发送数据失败:', err)
				// 添加发送失败的提示消息
				dialogueMessages.value.push({
					type: 'ERROR',
					content: '发送数据失败，请重试',
					timestamp: Date.now(),
					source: 'system',
					status: 'error'
				})
			}
		})
	}
	
		// 关闭对话框
		const closeDialogue = () => {
		// 关闭WebSocket连接
		if (socketTask) {
			uni.closeSocket({
				success: () => {
					console.log('WebSocket连接已关闭')
					socketTask = null
				}
			})
		}
	}
	
	// 组件卸载时关闭WebSocket连接
	onUnmounted(() => {
		// 关闭WebSocket连接
		uni.closeSocket({
			success: () => {
				console.log('组件卸载，WebSocket连接已关闭')
			}
		})
		
		// 移除全局事件监听
		uni.offSocketOpen()
		uni.offSocketMessage()
		uni.offSocketClose()
		uni.offSocketError()
		
		socketTask = null
	})
	
		// 滚动到底部
		const scrollToBottom = () => {
		// 小程序环境中不能使用document.querySelector
		// 使用nextTick确保DOM更新后再滚动
		nextTick(() => {
			// 使用uni-app的选择器API
			const query = uni.createSelectorQuery()
			query.select('.dialogue-messages').boundingClientRect(data => {
				if (data) {
					uni.pageScrollTo({
						scrollTop: data.height,
						duration: 300
					})
				}
			}).exec()
		})
	}
	
	// 格式化时间戳
	const formatTimestamp = (timestamp) => {
		const date = new Date(timestamp)
		const hours = date.getHours().toString().padStart(2, '0')
		const minutes = date.getMinutes().toString().padStart(2, '0')
		return `${hours}:${minutes}`
	}
	
		// 组件卸载时关闭WebSocket连接
		onUnmounted(() => {
		if (socketTask) {
			socketTask.close({
				success: () => {
					console.log('组件卸载，WebSocket连接已关闭')
				}
			})
			socketTask = null
		}
	})

	// 格式化日期为 YYYY年MM月DD日 HH:MM 格式
	const formatDate = (date) => {
		const year = date.getFullYear()
		const month = (date.getMonth() + 1).toString().padStart(2, '0')
		const day = date.getDate().toString().padStart(2, '0')
		const hours = date.getHours().toString().padStart(2, '0')
		const minutes = date.getMinutes().toString().padStart(2, '0')
		return `${year}年${month}月${day}日 ${hours}:${minutes}`
	}
	
	// 轮播图切换事件
	const onSwiperChange = (e) => {
		currentImageIndex.value = e.detail.current
	}
	
	// 设置当前图片
	const setCurrentImage = (index) => {
		currentImageIndex.value = index
	}
	
	// 获取平面图指示器位置
	const getFloorIndicatorPosition = (index) => {
		// 这里可以根据房间类型返回不同的位置坐标
		const positions = [
			{top: '50%', left: '50%'}, // 客厅A
			{top: '40%', left: '60%'}, // 客厅B
			{top: '30%', left: '70%'}, // 主卧
			{top: '60%', left: '30%'}, // 次卧
			{top: '20%', left: '40%'}, // 书房
			{top: '70%', left: '20%'}, // 厨房
			{top: '80%', left: '40%'}  // 卫生间
		]
		
		const pos = positions[index % positions.length]
		return {
			top: pos.top,
			left: pos.left
		}
	}
	
	// 预览大图
	const previewImage = (index) => {
		const urls = generatedDesigns.value.map(item => item.url)
		uni.previewImage({
			urls: urls,
			current: urls[index]
		})
	}
	
	// 再次生成设计
	const regenerateDesign = () => {
		// 清空现有设计
		generatedDesigns.value = []
		// 重新调用生成
		generatePlan()
	}
	
	// 编辑设计
	const editDesign = () => {
		uni.showToast({
			title: '编辑功能开发中',
			icon: 'none'
		})
	}
	
	// 模拟生成设计图片
	const generateDesignImages = (roomCount = 5) => {
		const designs = []
		// 示例图片，实际项目中应该从后端获取
		const sampleImages = [
			'http://sushyyr85.hb-bkt.clouddn.com/jzz.gif',
		]
		
		for (let i = 0; i < roomCount; i++) {
			designs.push({
				id: i + 1,
				url: sampleImages[i % sampleImages.length],
				roomType: roomTags.value[i % roomTags.value.length]
			})
		}
		
		return designs
	}
</script>

<template>
	<view class="design-container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="nav-back" @click="goBack">
				<text class="icon-back">←</text>
			</view>
			<view class="nav-title">整屋设计</view>
			<view class="nav-actions">
				<text class="icon-more">•••</text>
				<text class="icon-minimize">—</text>
			</view>
		</view>

		<!-- 内容区域 - 留白区域 -->
		<view class="content-area">
			<!-- 图片预览页面 -->
			<view class="design-preview" v-if="generatedDesigns.length > 0">
				<!-- 顶部时间日期 -->
				<view class="preview-timestamp">
					{{ formatDate(new Date()) }}
				</view>
				
				<!-- 项目信息 -->
				<view class="project-info">
					房屋信息： {{ houseInfo.size }} {{ styleInfo.name }}
				</view>
				
								<!-- 图片轮播 -->
				<swiper class="design-swiper" :indicator-dots="false" :autoplay="false" @change="onSwiperChange">
					<swiper-item v-for="(image, index) in generatedDesigns" :key="index">
						<!-- 修改为显示图片名称 -->
						<view class="room-tag">{{ image.roomType || roomTags[currentImageIndex] }}</view>
						<image :src="image.url" mode="aspectFill" class="design-image" @click="previewImage(index)"></image>
						
<!-- 						平面图指示器
						<view class="floor-plan-indicator">
							<image src="/static/images/floor-plan.png" mode="aspectFit" class="floor-plan-image"></image>
							<view class="floor-indicator-dot" :style="getFloorIndicatorPosition(index)"></view>
						</view> -->
					</swiper-item>
				</swiper>
				
				<!-- 底部指示器 -->
				<view class="image-indicators">
					<view 
						v-for="(_, index) in generatedDesigns" 
						:key="index" 
						:class="['indicator-dot', { active: currentImageIndex === index }]"
						@click="setCurrentImage(index)"
					></view>
				</view>
				
				<!-- 底部操作按钮 -->
				<view class="preview-actions">
					<view class="action-button" @click="regenerateDesign">
						<image src="/static/images/refresh.png" class="action-icon"></image>
						<text>再次生成</text>
					</view>
					<view class="action-button" @click="editDesign">
						<image src="/static/images/edit.png" class="action-icon"></image>
						<text>编辑</text>
					</view>
				</view>
			</view>
			
			<scroll-view class="dialogue-content" scroll-y :show-scrollbar="false" enhanced v-if="!generatedDesigns.length">
				<!-- 消息列表 -->
				<view class="message-list">
					<!-- 空状态 -->
					<view v-if="dialogueMessages.length === 0 && !isDialogueLoading" class="message-empty">
						<text class="empty-text">正在连接设计服务...</text>
					</view>
					
					<!-- 加载状态 -->
					<view v-if="isDialogueLoading && dialogueMessages.length === 0" class="message-loading">
						<view class="loading-spinner"></view>
						<text class="loading-text">正在连接设计服务...</text>
					</view>
					
					<!-- 消息项 -->
					<view 
						v-for="(message, index) in dialogueMessages" 
						:key="index"
						class="message-item"
						:class="{ 
							'message-system': message.source === 'system',
							'message-ai': message.source === 'ai',
							'message-error': message.type === 'ERROR',
							'message-progress': message.type === 'PROGRESS'
						}"
					>
						<!-- 不同类型消息的显示方式 -->
						<!-- 系统消息 -->
						<view v-if="message.source === 'system'" class="system-message">
							<text class="message-content">{{ message.content }}</text>
							<text class="message-time">{{ formatTimestamp(message.timestamp) }}</text>
						</view>
						
						<!-- 进度消息 -->
						<!-- <view v-else-if="message.type === 'PROGRESS'" class="progress-message"> -->
							<!-- <text class="message-content">{{ message.content }}</text> -->

							<!-- <text class="progress-percent">{{ message.status }}%</text> -->
						<!-- </view> -->
						
						<!-- 错误消息 -->
						<view v-else-if="message.type === 'ERROR'" class="error-message">
							<text class="error-icon">!</text>
							<text class="message-content">{{ message.content }}</text>
						</view>
						<!-- AI回复 -->
						<view v-else-if="message.source === 'ai'" class="ai-message">
							<!-- 修改为其他可用的图片资源 -->
							<view class="message-bubble">
								<!-- 当有图片集时显示图片 -->
								<view v-if="message.roomPics && Object.keys(message.roomPics).length > 0" class="image-grid">
									<view v-for="(imageUrl, roomName) in message.roomPics" :key="roomName" class="image-item">
										<view class="room-name-tag">{{ roomName }}</view>
										<view>{{ imageUrl }}</view>
										<image :src="imageUrl" mode="aspectFill" class="room-image" @click="previewSingleImage(imageUrl)"></image>
									</view>
								</view>
								<!-- 没有图片集时显示文字内容 -->
								<!-- <text v-else class="message-content" space="nbsp">{{ message.content }}</text> -->
							</view>
							<text class="message-time">{{ formatTimestamp(message.timestamp) }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- 底部留白，确保滚动时内容不被底部操作栏遮挡 -->
			<view class="bottom-spacinga"></view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<!-- 选项按钮 -->
			<view class="option-buttons" ref="optionButtons">
				<view class="option-btn" @click="selectHouseType">
					<image class="icon-image" src="/static/images/house.svg" mode="aspectFit"></image>
					<text class="option-text">选户型</text>
				</view>

				<view class="option-btn" @click="selectStyle">
					<image class="icon-image" src="/static/images/style.svg" mode="aspectFit"></image>
					<text class="option-text">选风格</text>
					<text v-if="is3DEnabled" class="tag-3d"></text>
				</view>
			</view>

			<!-- 发送信息内容 -->
			<view class="house-info">
				<text class="info-label">房屋信息：</text>
				<text class="info-value">{{ houseInfo.size }}</text>
				<text class="info-separator">|</text>
				<text class="info-label">风格：</text>
				<text class="info-value">{{ styleInfo.name }}</text>
			</view>

			<!-- 生成方案按钮 -->
			<view class="generate-button">
				<CommonButton type="primary" size="large" @click="generatePlan">
					生成方案
				</CommonButton>
			</view>
		</view>

		<!-- 遮罩层 - 户型 -->
		<view class="popup-mask" v-show="showHouseTypePopup" :class="{ 'mask-show': houseTypePopupAnimated }"
			@click="closeHouseTypePopup"></view>

		<!-- 遮罩层 - 风格 -->
		<view class="popup-mask" v-show="showStylePopup" :class="{ 'mask-show': stylePopupAnimated }"
			@click="closeStylePopup"></view>
		<!-- 户型选择弹出层 -->
		<view class="house-type-popup" v-show="showHouseTypePopup" :class="{ 'popup-show': houseTypePopupAnimated, 'popup-closing': houseTypeIsClosing }" :style="houseTypePopupStyle">
			<!-- 弹窗顶部导航 -->
			<view class="popup-nav">
				<view class="nav-back" @click="closeHouseTypePopup">
					<text class="icon-back">×</text>
				</view>
				<view class="nav-actions">
					<text class="icon-more">•••</text>
					<text class="icon-minimize">—</text>
				</view>
			</view>

			<!-- 标题部分（固定在顶部） -->
			<view class="popup-fixed-header">
				<view class="page-title">
					<text class="step-number">01</text>
					<text class="title-text">选择我家户型</text>
				</view>

				<!-- 户型选项卡 -->
				<scroll-view scroll-x class="house-type-tabs-container" show-scrollbar="false">
					<view class="house-type-tabs">
						<view 
							v-for="(tab, index) in houseTypesTabs" 
							:key="index"
							class="tab-item"
							:class="{ active: activeTabIndex === index }"
							@click="switchTab(index)"
						>
							{{ tab }}
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 可滚动的内容区域 -->
			<scroll-view class="popup-content" scroll-y :show-scrollbar="false" enhanced>
				<!-- 户型列表 -->
				<view class="house-type-list-container">
					<view v-if="isLoading" class="loading-box">
						<view class="loading-spinner"></view>
						<text class="loading-text">正在加载户型数据...</text>
					</view>
					
					<view v-else-if="loadError" class="error-box">
						<text class="error-text">{{ loadError }}</text>
						<view class="retry-btn" @click="fetchHouseTypes">重试</view>
					</view>
					
					<view v-else class="house-type-grid">
						<view 
							v-for="item in houseTypesList" 
							:key="item.id"
							class="house-type-item"
							@click="selectHouseTypeItem(item)"
						>
							<image :src="item.image" mode="aspectFit" class="type-image"></image>
							<view class="type-info">
								<text class="type-size">{{ item.size }}</text>
								<text class="type-area">{{ item.area }}m²</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 底部留白，确保滚动时内容不被底部操作栏遮挡 -->
				<view class="bottom-spacing"></view>
			</scroll-view>
		</view>

		<!-- 风格选择弹出层 -->
		<view class="style-popup" v-show="showStylePopup" :class="{
		'popup-show': stylePopupAnimated,
		'popup-closing': styleIsClosing
		}" :style="stylePopupStyle">
			<!-- 弹窗顶部导航 -->
			<view class="popup-nav">
				<view class="nav-back" @click="closeStylePopup">
					<text class="icon-back">×</text>
				</view>
				<view class="nav-actions">
					<text class="icon-more">•••</text>
					<text class="icon-minimize">—</text>
				</view>
			</view>

			<!-- 标题部分（固定在顶部） -->
			<view class="popup-fixed-header">
				<view class="page-title">
					<text class="step-number">02</text>
					<text class="title-text">选择喜欢的风格</text>
				</view>

				<!-- 风格选项卡 -->
				<scroll-view scroll-x class="style-tabs-container" :show-scrollbar="false">
					<view class="style-tabs">
						<view 
							v-for="(tab, index) in styleTypeTabs" 
							:key="index"
							class="tab-item"
							:class="{ active: activeStyleTabIndex === index }"
							@click="switchStyleTab(index)"
						>
							{{ tab }}
							<text v-if="index === 1" class="tag-3d-small"></text>
						</view>
					</view>
				</scroll-view>
			</view>
			
			<!-- 可滚动的内容区域 -->
			<scroll-view class="popup-content" scroll-y :show-scrollbar="false" enhanced>
				<!-- 快速生成提示 -->
<!-- 				<view class="quick-generate-tip">
					<text class="rocket-icon">🚀</text>
					<text class="tip-text">10秒生成平面设计方案，不限次数</text>
				</view> -->
				
				<!-- 上传参考图 -->
				<view class="upload-reference">
					<view class="upload-box">
						<text class="upload-icon">+</text>
						<text class="upload-text">上传我的参考图</text>
					</view>
				</view>
				
				<!-- 风格列表 -->
				<view class="style-list-container">
					<view class="style-grid">
						<view 
							v-for="item in styleTypesList" 
							:key="item.id"
							class="style-item"
							@click="selectStyleItem(item)"
						>
							<image :src="item.image" mode="aspectFill" class="style-image"></image>
							<view class="style-info">
								<text class="style-name">{{ item.name }}</text>
								<text v-if="item.is3D" class="tag-3d">3D</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 底部留白 -->
				<view class="bottom-spacing"></view>
			</scroll-view>
		</view>
	</view>
</template>

<style lang="scss">
	.design-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #ffffff;
		position: relative;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		position: relative;
		background-color: #ffffff;
		border-bottom: 1px solid #f0f0f0;

		.nav-back {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.icon-back {
				font-size: 40rpx;
				color: #333;
			}
		}

		.nav-title {
			font-size: 36rpx;
			font-weight: 500;
			color: #333;
		}

		.nav-actions {
			display: flex;
			align-items: center;

			.icon-more,
			.icon-minimize {
				margin-left: 30rpx;
				font-size: 40rpx;
				color: #333;
			}
		}
	}

	.content-area {
		flex: 1;
		background-color: #f8f8f8;
		position: relative;
		padding: 30rpx;
		padding-bottom: 60rpx;
		/* 为对话框腾出空间 */
	}

	.bottom-bar {
		padding: 30rpx 30rpx 20rpx;
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
		background-color: #ffffff;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		box-shadow: 0 -5rpx 15rpx rgba(0, 0, 0, 0.05);
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 1001;
		margin-top: 0;
		box-sizing: border-box;
	}

	.option-buttons {
		display: flex;
		margin-bottom: 30rpx;

		.option-btn {
			position: relative;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100rpx;
			background-color: #f8f8f8;
			border-radius: 20rpx;
			margin: 0 10rpx;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
			transition: all 0.2s;

			&:active {
				transform: scale(0.98);
				box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.05);
			}

			&.current {
				background-color: #e8f7e4;

				.option-text {
					color: #3cc51f;
					font-weight: bold;
				}
			}

			&:first-child {
				margin-left: 0;
			}

			&:last-child {
				margin-right: 0;
			}

			.icon-image {
				width: 44rpx;
				height: 44rpx;
				margin-right: 10rpx;
			}

			.option-text {
				font-size: 30rpx;
				color: #333;
				font-weight: 500;
			}

			.tag-3d {
				position: absolute;
				top: -10rpx;
				right: -10rpx;
				background-color: #3cc51f;
				color: #ffffff;
				font-size: 20rpx;
				padding: 4rpx 10rpx;
				border-radius: 10rpx;
				font-weight: bold;
			}
		}
	}

	.house-info {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		padding: 0 10rpx;
		background-color: #f9f9f9;
		border-radius: 12rpx;
		padding: 16rpx 20rpx;

		.info-label {
			font-size: 28rpx;
			color: #666;
		}

		.info-value {
			font-size: 28rpx;
			color: #333;
			font-weight: 500;
		}
		
		.info-separator {
			margin: 0 10rpx;
			font-size: 28rpx;
			color: #999;
		}
	}

	.generate-button {
		width: 100%;
		margin-bottom: 10rpx;

		:deep(.common-button) {
			border-radius: 16rpx;
			font-weight: 500;
			letter-spacing: 2rpx;
		}
	}

	/* 遮罩层 */
	.popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		z-index: 998;
		transition: background-color 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);

		&.mask-show {
			background-color: rgba(0, 0, 0, 0.5);
		}
	}

	/* 户型选择弹出层样式 */
	.house-type-popup,
	.style-popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: calc(100% - 250rpx);
		/* 减去底部操作栏的高度 */
		background-color: #ffffff;
		z-index: 999;
		display: flex;
		flex-direction: column;
		transform-origin: bottom center;
		transform: scaleY(0.7) translateY(30%);
		opacity: 0;
		transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.3s ease;
		will-change: transform, opacity;
		overflow: hidden;

		&.popup-show {
			transform: scaleY(1) translateY(0);
			opacity: 1;
		}

		&.popup-closing {
			.page-title {
				transform: translateY(-20px);
				opacity: 0;
				transition-delay: 0s;
			}

			.community-search {
				transform: translateY(-15px);
				opacity: 0;
				transition-delay: 0.05s;
			}

			.location-area {
				transform: translateY(-10px);
				opacity: 0;
				transition-delay: 0.1s;
			}
		}

		.page-title,
		.community-search,
		.location-area {
			transition: transform 0.35s cubic-bezier(0.33, 1, 0.68, 1),
				opacity 0.25s ease;
			transform: translateY(20px);
			opacity: 0;
		}

		&.popup-show {
			.page-title {
				transform: translateY(0);
				opacity: 1;
				transition-delay: 0.1s;
			}

			.community-search {
				transform: translateY(0);
				opacity: 1;
				transition-delay: 0.15s;
			}

			.location-area {
				transform: translateY(0);
				opacity: 1;
				transition-delay: 0.2s;
			}
		}

		.community-search {
			margin-bottom: 40rpx;
		}
	}

	.popup-nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		position: relative;

		.nav-back {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.icon-back {
				font-size: 50rpx;
				color: #333;
				font-weight: 300;
			}
		}

		.nav-actions {
			display: flex;
			align-items: center;

			.icon-more,
			.icon-minimize {
				margin-left: 30rpx;
				font-size: 40rpx;
				color: #333;
			}
		}
	}

	.popup-content {
		flex: 1;
		background-color: #f8f8f8;
		height: 100%;
		padding-bottom: 50rpx;
		-webkit-overflow-scrolling: touch;
		&::-webkit-scrollbar {
			display: none;
			width: 0 !important;
		}
		scrollbar-width: none; /* Firefox */
		-ms-overflow-style: none; /* IE and Edge */
		overflow: -moz-scrollbars-none; /* Firefox */
	}

	.page-title {
		margin: 20rpx 0 30rpx;
		padding: 0 30rpx;

		.step-number {
			display: block;
			font-size: 48rpx;
			font-weight: bold;
			color: #000;
			margin-bottom: 8rpx;
			line-height: 1;
		}

		.title-text {
			font-size: 40rpx;
			font-weight: bold;
			color: #000;
		}
	}

	.house-type-list-container {
		padding: 0 30rpx;
	}

	/* 户型列表样式 */
	.house-type-list {
		flex: 1;
	}

	.house-type-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 24rpx;
		padding: 0 0;
	}

	.house-type-item {
		background: #fff;
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
		position: relative;
		
		&.selected {
			border: 4rpx solid #000;
		}
		
		.type-image {
			width: 100%;
			height: 260rpx;
			background-color: #fff;
			display: block;
		}
		
		.type-info {
			padding: 20rpx;
			background: #fff;
			
			.type-size {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
				display: inline-block;
				margin-right: 8rpx;
			}
			
			.type-area {
				font-size: 24rpx;
				color: #999;
				display: inline-block;
			}
		}
		
		&:active {
			transform: scale(0.98);
			transition: transform 0.2s ease;
		}
	}

	/* 户型列表加载状态 */
	.loading-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
		
		.loading-spinner {
			width: 60rpx;
			height: 60rpx;
			border: 4rpx solid #f3f3f3;
			border-top: 4rpx solid #333;
			border-radius: 50%;
			animation: spin 1s linear infinite;
			margin-bottom: 20rpx;
		}
		
		.loading-text {
			font-size: 28rpx;
			color: #999;
		}
	}
	
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
	
	.error-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
		
		.error-text {
			font-size: 28rpx;
			color: #ff4d4f;
			margin-bottom: 20rpx;
		}
		
		.retry-btn {
			padding: 12rpx 40rpx;
			background-color: #f0f0f0;
			color: #333;
			font-size: 26rpx;
			border-radius: 100rpx;
			
			&:active {
				background-color: #e0e0e0;
			}
		}
	}

	/* 户型选项卡样式 */
	.house-type-tabs-container {
		margin: 0 -30rpx 30rpx;
		background-color: #fff;
		white-space: nowrap;
	}
	
	.house-type-tabs {
		display: inline-flex;
		padding: 20rpx 30rpx;
		width: auto;
		
		.tab-item {
			padding: 12rpx 40rpx;
			margin-right: 20rpx;
			font-size: 28rpx;
			color: #333;
			background-color: #f8f8f8;
			border-radius: 100rpx;
			transition: all 0.3s;
			flex-shrink: 0;
			
			&.active {
				color: #fff;
				background-color: #000;
				box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
			}
			
			&:last-child {
				margin-right: 0;
			}
		}
	}
	
	/* 风格选项卡样式 */
	.style-tabs-container {
		margin: 0 -30rpx 30rpx;
		background-color: #fff;
		white-space: nowrap;
	}
	
	.style-tabs {
		display: inline-flex;
		padding: 20rpx 30rpx;
		width: auto;
		
		.tab-item {
			position: relative;
			padding: 12rpx 40rpx;
			margin-right: 20rpx;
			font-size: 28rpx;
			color: #333;
			background-color: #f8f8f8;
			border-radius: 100rpx;
			transition: all 0.3s;
			flex-shrink: 0;
			
			&.active {
				color: #fff;
				background-color: #000;
				box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
			}
			
			&:last-child {
				margin-right: 0;
			}
			
			.tag-3d-small {
				position: absolute;
				top: -10rpx;
				right: -5rpx;
				background-color: #3cc51f;
				color: #ffffff;
				font-size: 16rpx;
				padding: 2rpx 8rpx;
				border-radius: 8rpx;
				font-weight: bold;
			}
		}
	}
	
	/* 快速生成提示 */
	.quick-generate-tip {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;
		
		.rocket-icon {
			font-size: 36rpx;
			margin-right: 10rpx;
		}
		
		.tip-text {
			font-size: 26rpx;
			color: #333;
		}
	}

	/* 上传参考图 */
	.upload-reference {
		padding: 0 30rpx;
		margin-bottom: 30rpx;
		
		.upload-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 200rpx;
			border: 2rpx dashed #ccc;
			border-radius: 20rpx;
			background-color: #f9f9f9;
			
			.upload-icon {
				font-size: 50rpx;
				color: #999;
				line-height: 1;
				margin-bottom: 10rpx;
			}
			
			.upload-text {
				font-size: 28rpx;
				color: #666;
			}
		}
	}

	/* 风格列表 */
	.style-list-container {
		padding: 0 30rpx;
	}

	.style-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 24rpx;
		padding: 0 0;
	}

	.style-item {
		background: #fff;
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
		position: relative;
		
		&.selected {
			border: 4rpx solid #000;
		}
		
		.style-image {
			width: 100%;
			height: 260rpx;
			background-color: #f0f0f0;
			display: block;
		}
		
		.style-info {
			padding: 20rpx;
			background: #fff;
			position: relative;
			
			.style-name {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
			}
			
			.tag-3d {
				position: absolute;
				top: -25rpx;
				right: 20rpx;
				background-color: #3cc51f;
				color: #ffffff;
				font-size: 20rpx;
				padding: 4rpx 10rpx;
				border-radius: 10rpx;
				font-weight: bold;
			}
		}
		
		&:active {
			transform: scale(0.98);
			transition: transform 0.2s ease;
		}
	}

	/* 底部操作区域 */
	.bottom-actions {
		display: flex;
		padding: 30rpx;
		gap: 20rpx;
		margin-top: 30rpx;
		
		.action-button {
			position: relative;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20rpx 0;
			background-color: #f0f0f0;
			border-radius: 100rpx;
			
			.button-icon {
				font-size: 30rpx;
				margin-right: 10rpx;
			}
			
			.button-text {
				font-size: 28rpx;
				color: #333;
			}
			
			&.style-btn {
				background-color: #000;
				
				.button-text {
					color: #fff;
				}
			}
			
			.tag-3d-small {
				position: absolute;
				top: -5rpx;
				right: 15rpx;
				background-color: #3cc51f;
				color: #ffffff;
				font-size: 16rpx;
				padding: 2rpx 8rpx;
				border-radius: 8rpx;
				font-weight: bold;
			}
		}
	}

	.bottom-spacing {
		height: 580rpx;
	}
	.bottom-spacinga {
		height: 300rpx;
	}

	/* 城市选择器样式和其他被删除的样式 */
	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	/* 固定在顶部的标题和选项卡 */
	.popup-fixed-header {
		background-color: #f8f8f8;
		z-index: 2;
	}

	/* 对话框弹出层样式 */
	.dialogue-popup {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 70%;
		background-color: #ffffff;
		z-index: 999;
		display: flex;
		flex-direction: column;
		transform: translateY(100%);
		transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
		will-change: transform;
		overflow: hidden;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		box-shadow: 0 -10rpx 30rpx rgba(0, 0, 0, 0.1);

		&.popup-show {
			transform: translateY(0);
		}
		
		.popup-nav {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 30rpx;
			border-bottom: 1rpx solid #f0f0f0;
			
			.nav-back {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.icon-back {
					font-size: 50rpx;
					color: #333;
					font-weight: 300;
				}
			}
			
			.nav-title {
				font-size: 32rpx;
				font-weight: 500;
				color: #333;
			}
			
			.nav-actions {
				display: flex;
				align-items: center;

				.icon-minimize {
					margin-left: 30rpx;
					font-size: 40rpx;
					color: #333;
				}
			}
		}
		
	.dialogue-messages {
		flex: 1;
		padding: 30rpx;
		background-color: #f8f8f8;
		-webkit-overflow-scrolling: touch;
		&::-webkit-scrollbar {
			display: none;
			width: 0 !important;
		}
		scrollbar-width: none; /* Firefox */
		-ms-overflow-style: none; /* IE and Edge */
		overflow: -moz-scrollbars-none; /* Firefox */
	}
}
	
	/* 消息样式 */
	.message-list {
		display: flex;
		flex-direction: column;
	}
	
	.message-item {
		margin-bottom: 30rpx;
		max-width: 90%;
		
		&.message-system {
			align-self: center;
		}
		
		&.message-ai {
			align-self: flex-start;
		}
		
		&.message-error {
			align-self: center;
		}
		
		&.message-progress {
			align-self: center;
			width: 85%;
		}
	}
	
	.system-message {
		background-color: rgba(0, 0, 0, 0.05);
		padding: 16rpx 24rpx;
		border-radius: 100rpx;
		text-align: center;
		
		.message-content {
			font-size: 24rpx;
			color: #666;
		}
		
		.message-time {
			font-size: 20rpx;
			color: #999;
			margin-left: 10rpx;
		}
	}
	
	.ai-message {
		display: flex;
		align-items: flex-start;
		
		.avatar-image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			background-color: #f0f0f0;
			margin-right: 20rpx;
		}
		
		.message-bubble {
			background-color: #ffffff;
			padding: 20rpx 24rpx;
			border-radius: 0 20rpx 20rpx 20rpx;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
			max-width: calc(100% - 120rpx);
			
			.message-content {
				font-size: 28rpx;
				color: #333;
				line-height: 1.6;
				word-break: break-word;
				white-space: pre-wrap;
			}
		}
		
		.message-time {
			font-size: 20rpx;
			color: #999;
			margin-top: 10rpx;
			margin-left: 100rpx;
		}
	}
	
	.error-message {
		display: flex;
		align-items: center;
		background-color: rgba(255, 77, 79, 0.1);
		padding: 16rpx 24rpx;
		border-radius: 100rpx;
		
		.error-icon {
			width: 36rpx;
			height: 36rpx;
			background-color: #ff4d4f;
			color: #fff;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			margin-right: 12rpx;
			line-height: 36rpx;
			text-align: center;
		}
		
		.message-content {
			font-size: 24rpx;
			color: #ff4d4f;
		}
	}
	
	.progress-message {
		background-color: #ffffff;
		padding: 20rpx 24rpx;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		
		.message-content {
			font-size: 26rpx;
			color: #333;
			margin-bottom: 16rpx;
			display: block;
		}
		
		.progress-bar {
			height: 8rpx;
			background-color: #f0f0f0;
			border-radius: 100rpx;
			overflow: hidden;
			margin-bottom: 10rpx;
			
			.progress-filled {
				height: 100%;
				background-color: #3cc51f;
				border-radius: 100rpx;
				transition: width 0.3s ease;
			}
		}
		
		.progress-percent {
			font-size: 20rpx;
			color: #999;
			text-align: right;
			display: block;
		}
	}
	
	.message-empty {
		display: flex;
		justify-content: center;
		padding: 60rpx 0;
		
		.empty-text {
			font-size: 26rpx;
			color: #999;
		}
	}
	
	.message-loading {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60rpx 0;
		
		.loading-spinner {
			width: 60rpx;
			height: 60rpx;
			border: 4rpx solid #f3f3f3;
			border-top: 4rpx solid #3cc51f;
			border-radius: 50%;
			animation: spin 1s linear infinite;
			margin-bottom: 20rpx;
		}
		
		.loading-text {
			font-size: 26rpx;
			color: #999;
		}
	}

	/* 内容区域的对话框样式 */
	.dialogue-container {
		position: absolute;
		top: 30rpx;
		left: 30rpx;
		right: 30rpx;
		bottom: 90rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: column;
		overflow: hidden;
		z-index: 10;
	}
	
	.dialogue-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		background-color: #fff;
	}
	
	.dialogue-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}
	
	.dialogue-close {
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 40rpx;
		color: #999;
		font-weight: 300;
	}
	
	.dialogue-content {
		flex: 1;
		padding: 30rpx;
		background-color: #f8f8f8;
		-webkit-overflow-scrolling: touch;
		&::-webkit-scrollbar {
			display: none;
			width: 0 !important;
		}
		scrollbar-width: none; /* Firefox */
		-ms-overflow-style: none; /* IE and Edge */
		overflow: -moz-scrollbars-none; /* Firefox */
	}

	/* 设计预览样式 */
	.design-preview {
		flex: 1;
		position: relative;
		display: flex;
		flex-direction: column;
		height: 100%;
	}
	
	.preview-timestamp {
		text-align: center;
		font-size: 24rpx;
		color: #999;
		padding: 10rpx 0;
	}
	
	.project-info {
		text-align: center;
		background: rgba(255, 255, 255, 0.9);
		padding: 16rpx 30rpx;
		border-radius: 12rpx;
		margin: 0 30rpx 20rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.design-swiper {
		flex: 1;
		width: 100%;
		height: calc(100% - 200rpx);
	}
	
	.design-image {
		width: 100%;
		height: 100%;
		position: relative;
	}
	
	.room-tag {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		background-color: rgba(0, 0, 0, 0.6);
		color: #fff;
		padding: 8rpx 16rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		z-index: 2;
		max-width: 70%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	
	.floor-plan-indicator {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		width: 150rpx;
		height: 150rpx;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 8rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		z-index: 2;
	}
	
	.floor-plan-image {
		width: 100%;
		height: 100%;
		opacity: 0.8;
	}
	
	.floor-indicator-dot {
		position: absolute;
		width: 20rpx;
		height: 20rpx;
		background-color: #ff6b6b;
		border: 3rpx solid #fff;
		border-radius: 50%;
		transform: translate(-50%, -50%);
		box-shadow: 0 0 10rpx rgba(255, 107, 107, 0.5);
		z-index: 3;
		animation: pulse 1.5s infinite;
	}
	
	@keyframes pulse {
		0% {
			transform: translate(-50%, -50%) scale(0.8);
			box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.5);
		}
		70% {
			transform: translate(-50%, -50%) scale(1);
			box-shadow: 0 0 0 10rpx rgba(255, 107, 107, 0);
		}
		100% {
			transform: translate(-50%, -50%) scale(0.8);
			box-shadow: 0 0 0 0 rgba(255, 107, 107, 0);
		}
	}
	
	.image-indicators {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;
	}
	
	.indicator-dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background-color: #ddd;
		margin: 0 8rpx;
		transition: all 0.3s;
	}
	
	.indicator-dot.active {
		width: 24rpx;
		height: 24rpx;
		background-color: #333;
	}
	
	.preview-actions {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 30rpx;
		background: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.action-button {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 16rpx 30rpx;
	}
	
	.action-icon {
		width: 48rpx;
		height: 48rpx;
		margin-bottom: 8rpx;
	}
	
	.action-button text {
		font-size: 24rpx;
		color: #666;
	}
</style>